"use client";
import {
  Button,
  Cascader,
  DatePicker,
  Form,
  FormInstance,
  Input,
  message,
} from "antd";
import React, { useState } from "react";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import style from "./index.module.scss";
import { updatePerMsg } from "@/api";
dayjs.locale("zh-cn");
interface BaseFormProps {
  formItemLayout?: object;
  width?: number;
  options?: any[];
  userDetail?: IUserInfo;
  form?: FormInstance<any>;
  initialValues?: any;
  initUserInfo?: () => void;
}
interface IUserInfo {
  id: number;
  userName: string;
  userAddress: string;
  userBirth: string;
  userIntroduce: string;
}

export default function BaseMsgForm(props: BaseFormProps) {
  const {
    formItemLayout,
    width,
    options,
    userDetail,
    form,
    initialValues,
    initUserInfo,
  } = props;
  const [formValues, setFormValues] = useState({});
  const [userBth, setUserBth] = useState<string | string[]>();

  const onFinish = async (values: any) => {
    let personalValues = {};
    if (values.userName === userDetail?.userName) {
      delete values.userName;
      personalValues = {
        ...values,
        userAddress: `${values.userAddress}`,
        userBirth: userBth,
        id: userDetail?.id,
      };
    } else {
      personalValues = {
        ...values,
        userAddress: `${values.userAddress[0]}/${values.userAddress[1]}`,
        userBirth: userBth,
        id: userDetail?.id,
      };
    }
    const res = await updatePerMsg({ ...personalValues });
    if (res.data.code === 200) {
      initUserInfo?.();
      message.success(res.data.msg);
    } else {
      message.error(res.data.msg);
    }
  };

  const handleDate = (value: any, dateString: string | string[]) => {
    console.log(dateString, "date");
    setUserBth(dateString);
  };

  const onFinishFailed = (values: any) => {
    console.log("failed", values);
    return;
  };

  return (
    <Form
      {...formItemLayout}
      onValuesChange={(values) => setFormValues(values)}
      variant={"filled"}
      style={{ maxWidth: 600, width: width }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      initialValues={initialValues}
      form={form}
    >
      <Form.Item
        label="用户名"
        name="userName"
        colon={false}
        validateDebounce={1000}
        rules={[{ required: true, message: "请输入用户名" }]}
        wrapperCol={{ offset: 1 }}
      >
        <Input placeholder="请填写你的用户名" />
      </Form.Item>

      <Form.Item
        label="所在地"
        name="userAddress"
        colon={false}
        validateDebounce={1000}
        wrapperCol={{ offset: 1 }}
        rules={[{ required: true, message: "请填写所在地" }]}
      >
        <Cascader
          style={{ width: "100%" }}
          placeholder="请填写你的所在地"
          options={options}
          fieldNames={{ value: "name", label: "name", children: "cityList" }}
        />
      </Form.Item>
      <Form.Item
        label="出生日期"
        colon={false}
        name="userBirth"
        validateDebounce={1000}
        rules={[{ required: true, message: "请填写出生日期" }]}
      >
        <DatePicker
          style={{ width: "100%" }}
          placeholder="请填写出生日期"
          onChange={handleDate}
          value={"2022-01-01"}
        />
      </Form.Item>
      <Form.Item
        label="个人介绍"
        name="userIntroduce"
        colon={false}
        validateDebounce={1000}
        rules={[]}
      >
        <Input.TextArea
          autoSize={{ minRows: 3, maxRows: 6 }}
          placeholder="请填写擅长的事情，兴趣爱好，职业技能等"
        />
      </Form.Item>

      <Form.Item wrapperCol={{ offset: 12, span: 10 }}>
        <Button
          type="primary"
          htmlType="submit"
          disabled={Object.keys(formValues).length === 0}
        >
          保存修改
        </Button>
      </Form.Item>
    </Form>
  );
}
